//如果没有登录就无法加入购物车 并且告诉顾客请登录
$(function() {
    $(".goubleColor-red").click(function() {
        var text = $(".goubleColor-red").text()
        if (text == "请登录") {
            location = "../html/login.html"
        }
    })

    //根据临时回话渲染登录人
    var user = JSON.parse(sessionStorage.getItem("userInfo"));
    // console.log(user);
    if (user) {
        var strHtml = `欢迎会员${user.name}`
        $(".goubleColor-red").text(strHtml)
        $(".goubleColor-red").css({
            color: "red"
        })
    }

});
//放大镜
$(window).on("load", function() {

    $(".ks-imagezoom-lens").css({
        width: ($(".ks-imagezoom-wrap").width() / $("#ks-zoom-img").width() * $(".ks-imagezoom-area").width()) / 4,
        height: $(".ks-imagezoom-wrap").height() / $("#ks-zoom-img").height() * $(".ks-imagezoom-area").height()
    })

    //鼠标进入小图  小盒子和大盒子都要显示

    $(".ks-imagezoom-wrap").on("mouseenter", function() {
        $(".ks-imagezoom-lens").show()
        $(".ks-imagezoom-area").show()
    }).on("mouseleave", function() {
        $(".ks-imagezoom-lens").hide()
        $(".ks-imagezoom-area").hide()

    }).on("mousemove", function(e) {
        let mX = e.pageX - $(this).offset().left - $(".ks-imagezoom-wrap").width() / 4
        let mY = e.pageY - $(this).offset().top - $(".ks-imagezoom-wrap").height() / 4
            // console.log(mX, mY);
        if (mX <= 0) {
            mX = 0
        }
        if (mX >= $(".ks-imagezoom-wrap").width() - $(".ks-imagezoom-lens").width()) {
            mX = $(".ks-imagezoom-wrap").width() - $(".ks-imagezoom-lens").width()
        }
        if (mY <= 0) {
            mY = 0
        }
        if (mY >= ($(".ks-imagezoom-wrap").height() - $(".ks-imagezoom-lens").height()) / 2) {
            mY = ($(".ks-imagezoom-wrap").height() - $(".ks-imagezoom-lens").height()) / 2
        }

        $(".ks-imagezoom-lens").css({
            left: mX,
            top: mY
        })

        let oScale = $(".ks-imagezoom-area").width() / $(".ks-imagezoom-lens").width()
        $(".ks-zoom-img").css({
            left: mX * -oScale,
            top: mY * -oScale
        })

    })

    //移入小轮播里面的li  就改变小图片和大图片和li里面的图片一致
    $(".items>ul").on("mouseenter", "li", function(e) {
        //获取当前绑定事件li的index
        let index = $(this).index()
            //获取当前li的子元素img的src值
        let imgSrc = $(".items>ul").children().eq(index).children('img').attr("src")
            //把获取到值赋值给bImg和sImg
        $(".J_ImgBooth").attr('src', imgSrc)
        $("#ks-zoom-img").attr('src', imgSrc)
    })


    //回到顶部
    $(".btn-returnTop").click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 1000)

    })
})

//左右点击小轮播图

;
(function() {
    $.fn.extend({
        facusSwiper() {
            let self = this;
            let index = 0;
            let $width = $(".checked").width()

            // console.log(333);
            // 左边箭头
            // console.log(this.find(".cycle-arrowt").eq(0));
            this.find(".prevbtn").click(function() {
                index--;
                if (index <= 0) {
                    index = 0;
                }
                self.find(".items ul").stop().animate({ left: -$width * index })
            })

            //右边箭头
            this.find(".nextbtn").click(function() {
                index++;
                if (index > 11) {
                    index = 11
                }
                self.find(".items ul").stop().animate({ left: -$width * index })
            });
        }
    })
})()

//入口函数
$(function() {
    $(".detail-img-wrapper").facusSwiper();
})

//点击改变li的边框颜色并获取title的值
function colorChecked(obj) {
    //obj 等于点击的那个元素
    $(obj).css({
        border: "1px solid red"
    }).siblings().css({
        border: "1px solid #ccc"
    })

    //获取子元素div的title属性值
    let tle = $(obj).children("div").attr("title")
    console.log(tle);


    //为了到后需要购物车数据的时候找得到
    //并且添加一个class 为 colTrue
    $(obj).addClass('colTrue').siblings().removeClass('colTrue')
}

function sizeChecked(obj) {
    //obj 等于点击的那个元素
    $(obj).css({
        border: "1px solid red"
    }).siblings().css({
        border: "1px solid #ccc"
    })

    //获取子元素div的title属性值
    let tle = $(obj).children("div").attr("title")
    console.log(tle);
    //并且添加一个class 为 sizeTrue
    $(obj).addClass('sizeTrue').siblings().removeClass('sizeTrue')

}



//购物数量的加减
$(function() {
    let num = 1;
    //给两个按钮绑定点击事件
    $(".xSalesAction-Dec").click(function() {
        num++;
        $(".xSalesAction-NumberTxt").val(num)
    })
    $(".xSalesAction-Add").click(function() {
        num--;
        if (num < 1) {
            num = 1
        }
        $(".xSalesAction-NumberTxt").val(num)

    })
})

//跳转购物车
function shop() {
    location = "../html/carts.html"
}